<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .bigbox {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .littlebox {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div class="bigbox" @click="bigFn">
            <p class="littlebox" @click.stop="littleFn"></p>
        </div> -->
        <a href="https://www.baidu.com" @click.prevent="handleClickFn">百度一下</a>
        <!-- 事件捕获 -->
        <!-- <div class="bigbox" @click.capture="bigFn">
            <p class="littlebox" @click="littleFn"></p>
        </div> -->
        <!-- .self -->
        <!-- <div class="bigbox" @click.self="bigFn">
            <p class="littlebox" @click="littleFn"></p>
        </div> -->
        <!-- 链式调用  @事件.修饰符.修饰符.....-->

        <!-- <form @submit.prevent></form> -->

        <form @submit.prevent>
            <input name="username" id="username" />
            <input name="password" id="pwd" />
            <button type="submit" @click="loginFn">提交</button>
        </form>
        <!-- .once -->
        <button @click.once="getPrize()">抽奖</button>

        <button v-on="{ mousedown: doThis, mouseup: doThat }">测试v-on 对象写法</button>
    </div>
</body>

</html>
<script>
    // 指令: 也是语法糖
    // 事件修饰符: 是一种vue 提供的语法糖, 可以简化代码
    // .stop
    // .prevent 阻止默认行为|事件


    // .stop - 调用 event.stopPropagation()。
    // .prevent - 调用 event.preventDefault()。
    // .capture - 在捕获模式添加事件监听器。
    // .self - 只有事件从元素本身发出才触发处理函数。
    // .{ keyAlias } - 只在某些按键下触发处理函数。
    // .once - 最多触发一次处理函数。
    // .left - 只在鼠标左键事件触发处理函数。
    // .right - 只在鼠标右键事件触发处理函数。
    // .middle - 只在鼠标中键事件触发处理函数。
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                message1: 'Hello'

            }
        },
        methods: {
            bigFn() {
                console.log('big');
            },
            littleFn(e) {
                // e.stopPropagation()
                console.log('little');
            },
            handleClickFn() {
                console.log(123);
            },
            loginFn() {
                // 
                let username = document.querySelector('#username').value
                let pwd = document.querySelector('#pwd').value
                //
            },
            getPrize() {
                console.log('抽奖');
            },
            doThis() {
                console.log('doThis');
            },
            doThat() {
                console.log('doThat');
            }

        }
    }).mount('#app') 
</script>